<template>
  <div :class="['comments-item']" :style="{background: bgColor} ">
    <div class="avatar" >
      <van-image width="100%" height="100%" round :src="comment.user.avatarUrl" />
    </div>
    <div class="info">
      <p class="content text-ellipsis">{{comment.content}}</p>
    </div>
  </div>
</template>

<script setup>
import {defineProps,ref, toRefs} from "vue";
import {random} from "../../../common/util";


let propsDef = defineProps({
  comment:{
    type:Object,
    default: null
  },
  tick:{
    type:Number,
    default:0
  },
  index:Number
});
let props = toRefs(propsDef);
let bottom = ref(0);



let colors = [
    "linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%)",
    "linear-gradient(to top, #37ecba 0%, #72afd3 100%)",
    "linear-gradient(to top, #48c6ef 0%, #6f86d6 100%)",
    "linear-gradient(to top, #7028e4 0%, #e5b2ca 100%)"
];
let bgColor = colors[random(0,colors.length - 1)];

</script>

<style lang="scss" scoped>
@keyframes show {
  from{
    max-width: 0;
  }
  to{
    max-width: 14rem;
    margin: 0 .5rem;
  }
}
.bg1{
  background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
}
.bg2{
  background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}
.bg3{
  background-image: linear-gradient(to top, #37ecba 0%, #72afd3 100%);
}
.bg4{
  background-image: linear-gradient(to top, #48c6ef 0%, #6f86d6 100%);
}
.bg5{
  background-image: linear-gradient(to top, #7028e4 0%, #e5b2ca 100%);
}
.bg6{
  background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%);
}
.comments-item{
  display: inline-flex;
  justify-content: space-around;
  align-items: center;
  margin:.5rem 0;
  z-index: 2003;
  border: 1px solid #ededed;
  padding: .2rem;
  border-radius: 2rem;
  background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);

  .avatar{
    width: 2rem;
    height: 2rem;
    padding: .2rem;
    border: 1px solid #ededed;
    border-radius: 50%;
    background: white;
  }
  .info{
    //max-width: 14rem;
    max-width: 0;
    animation: show .5s;
    animation-delay: 1s;
    animation-fill-mode: forwards;
    .content{
      font-size: 12px;
      color: white;
      text-shadow: 0 0 1px #9d9d9d;
    }
  }
}
</style>